<template>
    <div>
        <div class="educationClass">
            <el-button :type="item.isActive?'primary':''" v-for="(item,index) in educationClassList" :key="index" @click="educationClassClick(item)">{{item.name}}</el-button>
        </div>

        <div class="tabList">
            <div class="tabItem" :class="{active:item.isActive}" v-for="(item,index) in tabList" :key="index" @click="tabListItemClick(item)">{{item.name}}</div>

            <div class="operation">
                <el-button type="primary" size="midum">保存</el-button>
                <el-button type="warning" size="midum">提交审核</el-button>
            </div>            
        </div>
        <div class="content">
            <div class="minTile"><div class="line"></div><div>基本情况</div></div>
            <div class="basicSituation">
                <div class="formItem">
                    <div class="name">姓名：</div>
                    <el-input class="value" size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">别：</div>
                    <el-input class="value" size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">申报职称：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">是否破格：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">出生日期：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">参加工作时间：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">工作部门：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">现任专业技术职务：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">聘任时间：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">获得资格时间：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">专业：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">最高学历：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">最后毕业学校、专业：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">毕业时间：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">最高学位：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">最高学位授予学校、专业：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">授予时间：</div>
                    <el-input class="value"  size="mini" placeholder="请输入内容"></el-input>
                </div>
            </div>

            <div class="minTile"><div class="line"></div><div>申报条件</div></div>
            <div class="conditions">
                <div class="cTitle">评定教授职称应具备下列业绩条件</div>
                <div class="cList">
                    <div>系统讲授两门以上课程（含MOOC课程）：</div>
                    <div class="option">
                        <el-radio v-model="radio" label="1">是</el-radio>
                        <el-radio v-model="radio" label="2">否</el-radio>
                    </div>
                    <el-button type="primary" size="mini">更新</el-button>
                </div>

                <div class="cTitle">具备下列条件之一</div>
                 <div class="cList">
                    <div>1、作为指导教师，指导青年教员获得校级以上教学比赛一等奖以上奖励</div>
                    <div class="option">
                        <el-radio v-model="radio" label="1">是</el-radio>
                        <el-radio v-model="radio" label="2">否</el-radio>
                    </div>
                    <el-button type="primary" size="mini">更新</el-button>
                </div>
                

                <div class="next">
                    <el-button type="primary" size="mini">下一步</el-button>
                </div>


                <!-- 工作流 -->
                <div class="workflow">
                        <div class="point active">
                            <img src="../../assets/informationEntry/wf.png">
                            <label>教育教学类</label>
                        </div>
                        <div class="line">
                            <div class="c"></div>
                        </div>
                        <div class="point">
                            <img src="../../assets/informationEntry/wf.png">
                            <label>教育研究类</label>
                        </div>
                        <div class="line">
                            <div class="c"></div>
                        </div>
                        <div class="point">
                            <img src="../../assets/informationEntry/wf.png">
                            <label>工程技术类</label>
                        </div>
                        <div class="line">
                            <div class="c"></div>
                        </div>
                        <div class="point">
                            <img src="../../assets/informationEntry/wf.png">
                            <label>实验类</label>
                        </div>
                        <div class="line">
                            <div class="c"></div>
                        </div>
                        <div class="point">
                            <img src="../../assets/informationEntry/wf.png">
                            <label>专门业务类</label>
                        </div>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            educationClassList:[
                {key:"jxl",name:"教育教学类",isActive:true},
                {key:"yjl",name:"教育研究类",isActive:false},
                {key:"jsl",name:"工程技术类",isActive:false},
                {key:"sjl",name:"实验类",isActive:false},
                {key:"ywl",name:"专门业务类",isActive:false},
            ],
            tabList:[
                {key:"jx",name:"教学为主型",isActive:true},
                {key:"ky",name:"教学科研型",isActive:false},
                {key:"bz",name:"教学保障型",isActive:false},
            ]
        }
    },
    methods:{
        educationClassClick(item){
            for(const index in this.educationClassList){
                if(this.educationClassList[index].key == item.key){
                    this.educationClassList[index].isActive = true;
                }else{
                    this.educationClassList[index].isActive = false;
                }
            }
        },
        tabListItemClick(item){
            for(const index in this.tabList){
                if(this.tabList[index].key == item.key){
                    this.tabList[index].isActive = true;
                }else{
                    this.tabList[index].isActive = false;
                }
            }
        }
    }


}
</script>

<style scoped>

.educationClass{
    font-size: 15px;
}
.tabList{
    margin-top: 18px;
    display:flex;
}
.tabList .tabItem{
    padding:7px 12px;
    margin-right: 1px;
    font-size: 14px;
    color: #175AFF;
    cursor: pointer;

    background-image:url(../../assets/informationEntry/tab.png);
    background-size:100% 100%;    /* 背景图完整覆盖容器，但宽高比例变了，图片变形。*/
    background-repeat:no-repeat;
    background-position:bottom;   /* left/center/right top/center/bottom;*/
}
.tabList .tabItem.active{
    color: white;
    background-image:url(../../assets/informationEntry/tabActive.png);
}
.tabList .operation{
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
}
.tabList .operation>button{
    padding: 6px 15px;
}
.content{
    padding: 20px 12px;
    background: white;
}


/* 小标题 */
.minTile{
    display:flex;
    align-items: center;
    background: #f5f8fe;
    color: #417FFE;
    font-size: 14px;
    padding:14px 18px;
}
.minTile>.line{
    width: 3px;
    height: 12px;
    background:#417FFE;
    margin-right: 9px;
}

/* 基本情况 */
.basicSituation{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    margin-top: 11px;
    margin-bottom: 24px;
}
.basicSituation>.formItem{
    width: 33%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color:#333333;
    font-size:14px;
    margin:5px 0px;
}
.basicSituation>.formItem>.name{
    text-align: right;
    padding-right: 4px;
    width: 40%;
}
.basicSituation>.formItem>.value{
    width: 50%;
}

/* 申报条件 */
.conditions{
    padding: 17px 30px;
    color: #333333;
}
.cTitle{
    font-size: 16px;
}
.cList .option{
    text-align: right;
    padding-right: 100px;
}
.cList{
    display: flex;
    align-items: center;
    font-size: 12px;
    margin: 20px 2px;
    
}
.cList>*:not(:last-child){
    flex-grow: 1;
}

/* 下一步 */
.next{
    display: flex;
    justify-content: center;
    margin: 60px;
}
.next button{
    padding: 7px 35px;
}


/* 工作流 */
.workflow{
    display: flex;
    flex-direction: row;
    margin:30px 90px;
}
.workflow>.point{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    color: #B0B0B0;
    font-size: 16px;
}
.workflow>.point.active{
    color: #417FFE;
}
.workflow>.point>img{
    width: 39px;
    height: 39px;
}
.workflow>.point.active>img{

}
.workflow>.point>label{
    position: absolute;
    top: 50px;
    white-space: nowrap;
}
.workflow>.line{
    height: 39px;
    flex-grow: 1;
    min-width: 50px;
    display: flex;
    flex-direction: row;    
    align-items: center;
}
.workflow>.line>.c{
    background: gray;
    height: 4px;
    flex-grow: 1;
}


</style>